<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/plugin-element/plugin-element.html">
<link rel="import" href="../bower_components/plugin-element/plugin-xhr.html">
<link rel="import" href="../bower_components/plugin-element/plugin-message.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="shop-style-common.html">
<link rel="import" href="shop-image.html">

<dom-module id="shop-business">

    <template>
        <style include="shop-style-common">
            .notes{
                display: flex;
                justify-content: center;
                align-items: center;
                padding-top: 15px;
            }
            .notes span{
                margin: 0px 10px;
            }
        </style>
        <plugin-message id="msg"></plugin-message>
        <paper-input label="搜索商机" no-label-float>
            <iron-icon slot="suffix" icon="search"></iron-icon>
        </paper-input>
        <div class="notes"><span>% - 分成比例</span> <span><iron-icon icon="radio-button-unchecked" style="width:13px;height:13px; color: green"></iron-icon> - 收益指数</span></div>
        <paper-listbox>
            <template is="dom-repeat" items="{{vendors}}" as="vendor">
                <paper-icon-item>
                    <div class="avatar" slot="item-icon" style="background-color: rgba(0,128,0,{{vendor.income}});color:#000">
                        {{_formatRate(vendor.rate)}}
                    </div>
                    <paper-item-body two-line >
                        <div>{{vendor.title}}</div>
                        <div secondary>{{vendor.categories}}</div>
                    </paper-item-body>
                    <paper-icon-button icon="add" hidden="{{vendor.added}}" on-click="_add" alt="加入分销"></paper-icon-button>
                    <paper-icon-button icon="remove" hidden="{{!vendor.added}}" on-click="_remove" alt="退出分销"></paper-icon-button>
                </paper-icon-item>
            </template>
        </paper-listbox>
    </template>

    <script>
        class ShopBusiness extends PluginElement {

            static get is() {
                return 'shop-business';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    vendors:{
                        type:Array,
                        value:[
                            {
                                title:"德哥知了缙云店",
                                categories:"小吃、酒水、饮料",
                                rate:0.05,
                                income:0.5
                            },
                            {
                                title:"重庆火锅",
                                categories:"小吃、酒水、饮料",
                                rate:0.01,
                                income:0.1
                            },
                            {
                                title:"沙县小吃",
                                categories:"小吃、酒水、饮料",
                                rate:0.3,
                                income:0.2
                            }
                        ]
                    }
                }
            }

            _visibleChanged(visible) {
                if (visible) {
                    this.dispatchEvent(new CustomEvent('change-section', {
                        bubbles: true,
                        composed: true,
                        detail: {
                            title: '商机'
                        }
                    }));
                }
            }
            ready() {
                super.ready();
            }
            _add(e){
                this.$.msg._toast("您已经成功签约为"+e.model.vendor.title+"的分销商");
                this.set("vendors."+e.model.index+".added",true);
            }
            _remove(e){
                this.$.msg._toast("您已经取消"+e.model.vendor.title+"的分销商身份");
                this.set("vendors."+e.model.index+".added",false);
            }
            _formatRate(rate){
                return (rate*100)+"%";
            }
        }

        customElements.define(ShopBusiness.is, ShopBusiness);

    </script>

</dom-module>
